<template>
	<view class="carDetail-content">
		<cover-image @click="backHanlder" style="pointer-events:auto;z-index: 10;" class="carDetail-content-backImg"
			src="../../../../static/back-white.png" mode="scaleToFill"></cover-image>
			<view v-if="detailData.info.picture && detailData.info.picture.length" class="carDetail-content-mark">
				<template v-if="detailData.info.picture">
					{{curImgIndex}}/{{detailData.info.picture.length}}
				</template>
			</view>
		<swiper v-if="detailData.info.picture && detailData.info.picture.length" class="swiper" circular
			:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
			@change="swiperChange">
			<swiper-item v-for="(p,index) in detailData.info.picture" :key="index">
				<view :style="{background: 'url('+p.url+')'}" class="swiper-bg-img" @click.stop="swiperItemHandler(index)"></view>
			</swiper-item>
		</swiper>
		
		<view v-if="detailData.info.picture && !detailData.info.picture.length" class=""
			style="height: 100px;background-color: #2D56C5;">
		</view>
		<view class="carDetail-header">
			<view class="carDetail-header-name">
				{{detailData.info.cars_name ? detailData.info.cars_name:""}}
			</view>
			<view class="carDetail-header-price">
				<text class="carDetail-header-price-first">{{detailData.info.price?detailData.info.price:0}}<text v-if="detailData.info.price>0">万</text> </text>
				<text
					class="carDetail-header-price-second" v-if="detailData.info.guide_price">指导价：{{detailData.info.guide_price?detailData.info.guide_price:0}}万
					<text v-if="detailData.info.quotation_name"
						class="carDetail-header-price-third">/{{detailData.info.quotation_name}}</text>
					</text>
					
			</view>
			<view class="carDetail-header-date">
				<text>{{detailData.info.create_time?detailData.info.create_time:''}}</text>
			</view>
		</view>
		<view class="carDetail-baseInfo">
			<view class="carDetail-baseInfo-title">
				基础信息
				<image class="carDetail-baseInfo-title-img" src="../../../../static/bac-small.png" mode=""></image>
			</view>
			<view class="carDetail-baseInfo-grid">
				<view v-if="detailData.info.appearance_interior" class="carDetail-baseInfo-grid-item">
					<view class="carDetail-baseInfo-grid-item-name">
						{{detailData.info.appearance_interior}}
					</view>
					<view class="carDetail-baseInfo-grid-item-color">
						颜色
					</view>
				</view>
				<view v-if="detailData.info.cars_type" class="carDetail-baseInfo-grid-item">
					<view class="carDetail-baseInfo-grid-item-name">
						{{detailData.info.cars_type}}
					</view>
					<view class="carDetail-baseInfo-grid-item-color">
						类型
					</view>
				</view>
				<view v-if="detailData.info.cars_location" class="carDetail-baseInfo-grid-item">
					<view class="carDetail-baseInfo-grid-item-name">
						{{detailData.info.cars_location}}
					</view>
					<view class="carDetail-baseInfo-grid-item-color">
						车源所在地
					</view>
				</view>
				<view v-if="detailData.info.procedures_name" class="carDetail-baseInfo-grid-item">
					<view class="carDetail-baseInfo-grid-item-name">
						{{detailData.info.procedures_name}}
					</view>
					<view class="carDetail-baseInfo-grid-item-color">
						手续
					</view>
				</view>
				<view v-if="detailData.info.standard_name" class="carDetail-baseInfo-grid-item">
					<view class="carDetail-baseInfo-grid-item-name">
						{{detailData.info.standard_name}}
					</view>
					<view class="carDetail-baseInfo-grid-item-color">
						排放标准
					</view>
				</view>
			</view>
			<view v-if="detailData.info.configuration" class="carDetail-baseInfo-set">
				<view class="carDetail-baseInfo-set-name">
					配置：
				</view>
				<view class="carDetail-baseInfo-set-text">
					{{detailData.info.configuration}}
				</view>
			</view>
			<view v-if="detailData.info.remark_name" class="carDetail-baseInfo-set">
				<view class="carDetail-baseInfo-set-name">
					备注:
				</view>
				<view class="carDetail-baseInfo-set-text">
					<view v-if="detailData.info.remark_name.length > 0" class="" style="background-color: #999999;padding: 5px 8px;border-radius: 8px;display: inline-block;margin-right: 15rpx;margin-bottom: 15rpx;font-size: 24rpx; color: #fff;" v-for="(item,index) in detailData.info.remark_name" :kye="index">
						{{item}}
					</view>
					<view>{{detailData.info.remark?detailData.info.remark:''}}</view>
				</view>
				
			</view>
		</view>
		<!-- class="carDetail-location-img" -->
		<view class="carDetail-location" @click="dealerHandler">
			<image class="carDetail-location-bgimg" src="../../../../static/store-location-bac.png" mode="scaleToFill">
			</image>
			<view class="carDetail-location-name">
				<image class="carDetail-location-img" :src="detailData.business.imageurl" mode="scaleToFill"></image>
				<view class="carDetail-location-text">
					<view class="carDetail-location-text-name">
						{{detailData.business.name?detailData.business.name:''}}
					</view>
					<view class="carDetail-location-text-note">
						{{detailData.business.register_time?detailData.business.register_time:''}}
					</view>
				</view>
			</view>

			<image class="carDetail-location-img2" src="../../../../static/auth_location.png" mode=""></image>
		</view>
		<view class="carDetail-flow" v-if="detailData.logistics && detailData.logistics.start_city_name && detailData.logistics.end_city_name">
			<!-- <image class="carDetail-flow-bgimgs" src="https://api.cst365.top/login_bkg.png" mode=""></image> -->
			<image class="carDetail-flow-bgimgs" src="../../../../static/flow-offer.png" mode="scaleToFill"></image>
			<view class="carDetail-flow-title">
				物流报价
				<image class="carDetail-baseInfo-title-img" src="../../../../static/bac-small.png" mode=""></image>
			</view>
			<view class="carDetail-flow-content">
				<view class="carDetail-flow-content-address">
					<view class="">
						<view class="carDetail-flow-content-address-name">
							始发地
						</view>
						<view class="carDetail-flow-content-address-text">
							{{detailData.logistics.start_city_name?detailData.logistics.start_city_name:''}}
						</view>
					</view>
					<view class="">
						<view class="">
							<image class="carDetail-flow-content-address-img" src="../../../../static/single_Arrow.png"
								mode="scaleToFill"></image>
						</view>
						<view class="carDetail-flow-content-address-day">
							预计{{detailData.logistics.days?detailData.logistics.days:''}}天送达
						</view>
					</view>
					<view class="">
						<view class="carDetail-flow-content-address-name">
							目的地
						</view>
						<view class="carDetail-flow-content-address-text">
							{{detailData.logistics.end_city_name?detailData.logistics.end_city_name:''}}
						</view>
					</view>
				</view>
				<view class="carDetail-flow-content-more"
					v-if="detailData.logistics.start_city_name && detailData.logistics.end_city_name">
					<button type="primary" @click="logisticsHandler" style="background-color: #007aff;">更多物流报价
						></button>
				</view>
			</view>
		</view>
		<template v-if="detailData.recommendCars && detailData.recommendCars.length">
			<view class="carDetail-flow-title" style="margin: 10px;">
				相关车源
				<image class="carDetail-baseInfo-title-img" src="../../../../static/bac-small.png" mode=""></image>
			</view>
			<view class="carDetail-list" :key="index" v-for="(recommend,index) in detailData.recommendCars"
				@click="recommendHandler(recommend,index)">
				<view class="carDetail-list-item">
					<view class="carDetail-list-item-img">
						<image :src="recommend.url" mode="widthFix">
						</image>
					</view>
					<view class="carDetail-list-item-content">
						<view class="carDetail-list-item-content-name">
							{{recommend.cars_name}}
						</view>
						<view class="carDetail-list-item-content-note">
							{{recommend.cars_type}} {{recommend.appearance_interior}}
						</view>
						<view class="carDetail-list-item-content-price">
							<text class="carDetail-list-item-content-price-first">{{recommend.price}}<text v-if="recommend.price > 0">万</text> </text>
							<text class="carDetail-list-item-content-price-second" v-if="recommend.guide_price">指导价{{recommend.guide_price}}万</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view style="height: 90px;width: 100%;">
		</view>
		<view class="carDetail-btn">
			<view class="carDetail-btn-sc" @click="collectHandler">
				<image v-if="detailData.info.collect == 0" class="carDetail-btn-img"
					src="../../../../static/me_shoucang.png" mode="">
					<image v-if="detailData.info.collect == 1" class="carDetail-btn-img"
						src="../../../../static/save-select.png" mode=""></image>
				</image>
				<view class="">
					{{detailData.info.collect==0?"收藏":"已收藏"}}
				</view>
			</view>
			<button type="primary" @click="sellerHandler" style="background-color: #007aff;">联系卖家</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop-content">
				<view class="pop-content-title">
					拨打电话
				</view>
				<view class="pop-content-note">
					点击后拨打您的电话，商家可见
				</view>
				<template v-if="detailData.contactSeller">
					<view class="pop-content-tel" :key="index" v-for="(item,index) in detailData.contactSeller"
						@click="ringTel(item.mobile)">
						<view class="">
							{{item.name}}
						</view>
						<view class="">
							{{item.mobile}}
						</view>
					</view>
				</template>

			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getCarDetail
	} from "@/api/newCarSerach.js"
	import {
		latLongGetAddress
	} from '@/api/base.js';
	import {
		collectionUpdate
	} from "@/api/secondhandCar.js"
	import base64Src from "@/common/base64Src.js"
	export default {
		data() {
			return {
				cardsId: '',
				curImgIndex: 1,
				collectText: 0,
				userData: null,
				detailData: {
					info: {},
					business: {},
					logistics: {}
				},
				locationData: null,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				photos: [{
						id: '1',
						src: "http://atlas.cst365.top/uploads/api/picture/202306/57434ad6b5921535a949972b30423e01.png",
					},
					{
						id: '2',
						src: "http://atlas.cst365.top/uploads/api/picture/202306/57434ad6b5921535a949972b30423e01.png",
					},
					{
						id: '3',
						src: "http://atlas.cst365.top/uploads/api/picture/202306/57434ad6b5921535a949972b30423e01.png",
					},
					{
						id: '4',
						src: "http://atlas.cst365.top/uploads/api/picture/202306/57434ad6b5921535a949972b30423e01.png",
					}
				]
			}
		},
		methods: {
			baseToUrl:function(path){
				return  base64Src(path,(url)=>{
					return url
				})
			},
			recommendHandler: function(data, index) {
				console.log(data, index);
				getCarDetail(this.userData.id, data.id,this.userData.city ).then(
					res => {
						console.log("车源详情===", res);
						 uni.pageScrollTo({
							scrollTop: 0,
							duration: 100,
						});
						this.detailData = res.data
					})
			},
			backHanlder: function(event) {
				console.log("111111111");
				event.stopPropagation()
				uni.navigateBack()
			},
			dealerHandler: function() {
				uni.navigateTo({
					url: "/pages/home/carDealer/carDealer?position=" + this.detailData.info.users_id
				})
			},
			ringTel: function(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			collectHandler: function() {
				if(this.userData && this.userData.id){
					collectionUpdate({
						users_id: this.userData.id,
						state: 1,
						cars_id: this.detailData.info.id,
						shop_users_id: this.detailData.info.users_id
					}).then(res => {
						if (res.code == 0) {
							console.log("收藏成功");
							this.collectText = 1
						}
						this.init()
					})
				}else{
					uni.showModal({
						title:"当前未登录，是否前去登录？",
						cancelText:"否",
						confirmText:"是",
						success() {
							uni.navigateTo({
								url: '/pages/login/login',
							})
						}
					})
				}
			},
			logisticsHandler: function() {
				console.log("物流报价");
				uni.navigateTo({
					url: `/pages/home/logistics/logisticsAskPrice?startName=${this.detailData.logistics.start_city_name}&endName=${this.detailData.logistics.end_city_name}`
				})
			},
			sellerHandler: function() {
				console.log("联系卖家");
				this.$refs.popup.open('bottom')
				// uni.navigateTo({
				// 	url: "/pages/home/carDealer/carDealer"
				// })
			},
			swiperChange(e) {
				console.log("111111111", e);
				this.curImgIndex = e.detail.current + 1
			},
			swiperItemHandler(index) {
				const photoList = []
				this.detailData.info.picture.forEach(item => {
					photoList.push(item.url)
				})
				uni.previewImage({
					current: index,
					urls: photoList
				})
			},
			authorizedLocation() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success: (res) => {
							// res.authSetting['scope.userLocation'] === undefined  表示 初始化进入，从未授权
							// res.authSetting['scope.userLocation'] === true       表示 已授权
							// res.authSetting['scope.userLocation'] === false      表示 授权拒绝
							if (res.authSetting['scope.userLocation'] === undefined) {
								// console.log("弹出位置授权框")
								this.getLocation().then((res) => {
									// 授权位置成功
									resolve(res)
								}).catch((err) => {
									// 授权位置失败
									reject(err)
									uni.showToast({
										title: '授权位置失败',
										icon: 'none',
										duration: 3000
									})
								})
							} else if (res.authSetting['scope.userLocation'] === true) {
								resolve(res)
							} else if (res.authSetting['scope.userLocation'] === false) {
								uni.showModal({
									title: '提示',
									content: '是否允许授权位置信息',
									confirmText: '去设置',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: (res) => {
													if (res.authSetting[
															'scope.userLocation'
														]) {
														resolve(res)
													} else {
														reject(res)
														uni.showToast({
															title: '授权失败',
															icon: 'none',
															duration: 3000
														})
													}
												},
												fail: (err) => {
													reject(err)
													uni.showToast({
														title: '打开设置异常',
														icon: 'none',
														duration: 3000
													})
												}
											})
										} else {
											reject(res)
										}

									},
									fail: err => {
										reject(err)
										uni.showToast({
											title: '弹窗异常',
											icon: 'none',
											duration: 3000
										})
									}

								})

							}
						}
					})
				})
			},
			// 根据经纬度得到位置信息
			getLocationInfo(location) {
				var that = this
				latLongGetAddress(location).then(res => {
					if (res.code == 0) {
						const locationObj = {
							"name": res.data.city.slice(0, res.data.city.length - 1),
							"id": res.data.city_id + ''
						}
						that.locationData = locationObj
						console.log("locationObj===", locationObj);
						uni.setStorageSync('address', locationObj)
					} else {
						uni.showToast({
							title: '获取当前位置失败，请选择城市',
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getLocationByUniAPI() {
				// #ifdef  MP-WEIXIN
				var that = this
				// 判断是否授权
				this.authorizedLocation().then((res) => {
					// 第一次授权
					if (res.errMsg === "getLocation:ok") {
						const long = res.latitude;
						const lat = res.longitude;
						let location = {
							long,
							lat
						}
						// 根据经纬度得到位置信息
						that.getLocationInfo(location)
					} else if (res.errMsg === "getSetting:ok") {
						//已授权
						that.getLocation().then((res) => {
							// 获取位置成功
							const long = res.latitude;
							const lat = res.longitude;
							let location = {
								long,
								lat
							}
							// 根据经纬度得到位置信息
							that.getLocationInfo(location)
						}).catch((err) => {
							// 授权位置失败
							reject(err)
							uni.showToast({
								title: '授权位置失败',
								icon: 'none',
								duration: 3000
							})
						})
					}
				}).catch((err) => {
					if (err.errMsg === "showModal:ok" && err.confirm == false) {}
				})
				// #endif

			},
			init(){
				getCarDetail(this.userData.id, this.cardsId,this.userData.city ).then(
					res => {
						console.log("车源详情===", res);
						this.detailData = res.data
					})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "详情"
			})
		},
		onLoad(option) {
			console.log("canhsu ===", option.id);
			this.cardsId = option.id
		},
		mounted() {
			this.userData = uni.getStorageSync("login")
			const that = this
			// '7D2280C9-2E47-0245-7C43-8298DBEB2B64' car id
			this.init()
			// if (this.userData) {
			// 	uni.getLocation({
			// 		success(res) {
			// 			console.log("weizhi===", res);
			// 			that.getLocationInfo({
			// 				lat: res.longitude,
			// 				long: res.latitude 
			// 			})
			// 		}
			// 	})
			// }

		}
	}
</script>

<style scoped lang="scss">
	swiper-item{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.swiper-img{

	}
	.carDetail-content {
		position: relative;

		&-backImg {
			position: absolute;
			top: 50px;
			left: 20px;
			width: 25px;
			height: 25px;
		}
		&-mark {
			position: absolute;
			right: 35px;
			top: 120px;
			color: #fff;
			background-color: #000;
			opacity: 0.4;
			padding: 3px 6px;
			z-index: 10;
		}
	}

	.carDetail-header {
		margin: 10px;
		padding: 15px 10px;
		background-color: #fff;
		border-radius: 7px;
		line-height: 30px;

		&-name {
			font-size: 18px;
			font-weight: bold;

		}

		&-price {
			&-first {
				color: #EC4B4B;
				font-size: 20px;
				font-weight: bold;
				margin-right: 20px;
			}

			&-second {
				font-size: 12px;
				color: #666666;
				margin-right: 20px;
			}
			&-third{
				font-size: 12px;
				color: #666666;
			}
		}

		&-date {
			font-size: 12px;
			color: #999999;
			margin-bottom: -10px;
		}
	}

	.carDetail-baseInfo {
		margin: 10px;
		padding: 15px 10px;
		background-color: #fff;
		border-radius: 7px;
		margin-top: 10px;

		&-title {
			font-size: 15px;
			font-weight: bold;
			line-height: 25px;
			letter-spacing: 1px;
			position: relative;

			&-img {
				position: absolute;
				left: 5px;
				top: 8px;
				width: 60px;
				height: 12px;
			}
		}

		&-grid {
			display: grid;
			grid-template-columns: repeat(3, auto);

			&-item {
				padding: 20px 20px 0;
				border-bottom: 1px solid #E6E6E6;
				text-align: center;

				&-name {
					font-size: 13px;
					height: 35px;
				}

				&-color {
					font-size: 13px;
					color: #999999;
					padding-bottom: 15px;
				}

				// &:nth-child(3n-2) {
				// 	border-right: 1px solid #E6E6E6;
				// }

				// &:nth-child(3n) {
				// 	border-left: 1px solid #E6E6E6;
				// }
			}
		}

		&-set {
			padding: 15px 10px;
			background-color: #fff;
			border-radius: 7px;
			margin-top: 10px;
			background-color: #F2F2F2;
			display: flex;

			&-name {
				min-width: 50px;
			}
		}
	}

	.carDetail-location {
		margin: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		position: relative;
		margin-top: 10px;

		&-bgimg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		&-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
		}

		&-text {
			&-name {
				font-size: 18px;
				font-weight: bold;
			}

			&-note {
				color: #666666;
				font-size: 12px;
			}

		}

		&-img2 {
			width: 30px;
			height: 35px;
		}
	}

	.carDetail-flow {
		margin: 10px;
		padding: 15px 10px;
		background-color: #fff;
		border-radius: 7px;
		margin-top: 10px;
		position: relative;

		&-bgimgs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 10px);
		}

		&-title {
			font-size: 15px;
			font-weight: bold;
			line-height: 20px;
			letter-spacing: 1px;
			position: relative;
			;

			&-img {
				position: absolute;
				left: 5px;
				top: 8px;
				width: 60px;
				height: 12px;
			}
		}

		&-content {
			z-index: 10;
			display: flex;
			flex-direction: column;

			&-address {
				z-index: 10;
				display: flex;
				justify-content: space-around;
				text-align: center;

				&-img {
					width: 60px;
					height: 30px;
				}

				&-name {
					color: #666666;
					line-height: 30px;
				}

				&-text {
					font-weight: bold;
					font-size: 18px;
				}

				&-day {
					color: #0E59EA;
				}
			}

			&-more {
				display: flex;
				justify-content: center;
				margin-top: 20px;

				button {
					width: 45%;
					font-size: 14px;
				}
			}
		}
	}

	.carDetail-list {
		padding: 15px 10px;
		background-color: #fff;
		border-radius: 7px;
		margin: 10;

		&-item {
			display: flex;

			&-img {
				width: 120px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				image{
					width: 100%;
				}
			}

			&-content {
				padding-left: 10px;

				&-name {
					font-weight: bold;
					font-size: 18px;
					// line-height: 40px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				&-note {
					line-height: 30px;
				}

				&-price {
					line-height: 40px;

					&-first {
						color: #EC4B4B;
						font-weight: bold;
						font-size: 20px;
						margin-right: 10px;
					}
				}
			}

		}
	}

	.carDetail-btn {
		z-index: 11;
		position: fixed;
		bottom: 0;
		height: 80px;
		background-color: #fff;
		display: flex;
		width: 100%;
		align-items: center;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(119, 119, 119, 0.35);

		&-sc {
			width: 20%;
			text-align: center;
		}

		&-img {
			height: 20px;
			width: 20px;
		}

		button {
			width: 70%;
		}
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 600rpx;
		position: relative;

		&-img {
			width: 100%;
			height: 100%;
		}
		.swiper-bg-img{
			width: 100%;
			height: 100%;
			background-size: cover !important;
			background-repeat: no-repeat !important;
			background-position: center center !important;
		}
		
	}

	.pop-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px 10px 0 0;
		text-align: center;

		&-title {
			font-weight: bold;
			font-size: 16px;
		}

		&-note {
			font-size: 12px;
			color: #999999;
			line-height: 25px;
		}

		&-tel {
			display: flex;
			justify-content: center;
			gap: 30rpx;
			color: #2D56C5;
			line-height: 40px;
			font-size: 32rpx;
			border-bottom: 1px solid #eee;
		}
	}
</style>